<!--单词查询结果界面-->
<template>
  <div style="margin:10px;padding:50px; background-image: url('../../static/image/background.jpg');background-size: cover">
    <div>
      <el-row >
        <el-col :span="12">
          <el-page-header @back="goBack" content="查询结果"></el-page-header>
        </el-col>
        <el-col :span="2" :offset="10">
          <el-popover
            placement="top"
            width="160"
            v-model="visible">
            <p>若需查询下一个单词，请点击返回再查询！</p>
            <div style="text-align: right;">
              <el-button type="info"  @click="visible = false">确定</el-button>
            </div>
            <el-button slot="reference">提示</el-button>
          </el-popover>
        </el-col>
      </el-row>
    </div>
    <br><br><br>
    <div>
      <el-row>
        <el-col :span="12" :offset="6">
          <el-card  style="border-radius: 30px;height: 500px;text-align: center" shadow="always">
            <p style="font-size: x-large;font-family: 微软雅黑">单词词意</p>
            <el-divider></el-divider>
            <div style="height: 100px;text-align: center;margin-top:40px">

              <p style="margin-top: 10px;
              font-size: xx-large;
              font-family: 微软雅黑;" v-text="wordsTranslation" ></p>
              <p style="margin-top: 10px;
              font-size: xx-large;
              font-family: 微软雅黑;" v-text="wordsBasic" ></p>
              <p style="margin-top: 10px;
              font-size: xx-large;
              font-family: 微软雅黑;" v-text="wordsPhonetic" ></p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "WordsMean",
  data(){
   return{
     wordsTranslation:"",
     wordsBasic:"",
     wordsPhonetic:"",
     visible: false,
    }
  },
  methods: {
    goBack() {
      this.$router.replace('/Homepage')
    },
  },
  mounted() {
    this.wordsTranslation = "翻译结果:"+ this.$route.params.wordsTranslation;
    this.wordsBasic = this.$route.params.wordsBasic
    this.wordsPhonetic = "音标："+this.$route.params.wordsPhonetic
  },

}
</script>

<style scoped>

</style>
